import { Form, Input, Radio, Switch, Col, Row, FormInstance } from "antd";
import { useEffect, useState } from "react";
import { KeyValueSetter } from "@/pages/lowCodeEditorPlus/components/Setting/selectors/KeyValueSetter";
type HttpConfType = {
  form: FormInstance<any>,
  rawFormValue: Record<string, any> | undefined
}
export function HttpConf({form, rawFormValue}:HttpConfType) {
  const [showData, setShowData] = useState(rawFormValue?.data? true: false)
  function handleChangeDataTable(state: boolean) {
    if(state){
      form.setFieldsValue({data: undefined})
    }
    setShowData(!state)
  }

  const dataFieldValidator = (_:any, value: Record<string, any>) => {
    const hasEmptyKey = Object.keys(value).some(cell=>cell === "")
    if (hasEmptyKey) {
      return Promise.reject(new Error('键名不可为空'));
    }
    return Promise.resolve();
  };
  return (
    <>
      <Form.Item label="发送数据">
        <Switch value={showData} onChange={()=>handleChangeDataTable(showData)}/>
      </Form.Item>
      {
        showData && (
        <Form.Item label=" " name="data" rules={[{ validator: dataFieldValidator }]}>
          <KeyValueSetter/>
        </Form.Item>)
      }
      
    </>
  );
}
